<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="themes/material/easyui.css" rel="stylesheet">
<link href="themes/icon.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<script src="js/easyui-lang-zh_CN.js"></script>
<style type="text/css">
        #tips span{float:left;width:58px;height:20px;border-radius: 3px;color:#fff;overflow:hidden;background:#ccc;margin-right:2px;line-height:10px;text-align:center;}
        #tips.s1 .active{background:#f30;} 
        #tips.s2 .active{background:#fc0;} 
        #tips.s3 .active{background:#cc0;}
        #tips.s4 .active{background:#090;}
 </style>
<title>修改密码</title>
</head>
<script type="text/javascript">
/*密码强度验证 
强度规则:
       1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；
       2) 任何字符数的两类字符组合，中；
       3) 12位字符数以下的三类或四类字符组合，强；
       4) 12位字符数以上的三类或四类字符组合，非常好。*/
window.onload = function() {
    var oTips = document.getElementById("tips");
    var oInput = document.getElementsByTagName("input")[1];
    var aSpan = oTips.getElementsByTagName("span");
    var aStr = ["弱", "中", "强", "非常好"];
    var i = 0;

    oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
        var index = checkStrong(this.value);
        this.className = index ? "correct": "error";
        oTips.className = "s" + index;
        for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
        index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
    };
};
function checkStrong(sValue) {
    var modes = 0;
    if (sValue.length < 6) return modes;
    if (/\d/.test(sValue)) modes++; //数字
    if (/[a-z]/.test(sValue)) modes++; //小写
    if (/[A-Z]/.test(sValue)) modes++; //大写  
    if (/\W/.test(sValue)) modes++; //特殊字符
    switch (modes) {
    case 1:
        return 1;
        break;
    case 2:
        return 2;
    case 3:
    case 4:
        return sValue.length < 12 ? 3 : 4;
        break;
    }
}


	
$(document).ready(
					function() {
						/* 验证输入密码与原密码是否一致  */
						$("#oldepsw")
								.blur(
										function() {
											var oldepsw = $('#oldepsw').val();
											
													$.ajax({
														type : "POST",
														url : 'validate',
														data : {
															'oldepsw' : oldepsw
														},
														dataType : 'json',
														success : function(
																result) {
															if (result.msg == "1") {
																//输入匹配，显示正确按钮
																$("#showimg")
																		.empty();
																$("#showimg")
																		.append(//向每个匹配的元素内部追加内容。
																				"<img src='${pageContext.request.contextPath}/themes/icons/ok.png'>");
															} else {
																$("#showimg")
																		.empty();
																$("#showimg")
																		.append(
																				"<img src='${pageContext.request.contextPath}/themes/icons/no.png'>");
																$("#uppsw").form('clear');
															}
														}
													});
										});
						
					   //登录密码强度验证框显示
						$("#npsw").focus(function(){
							$("#tips").show();
						});
					});
	//配置表单清空内容事件
	function clearForm() {
		$("#uppsw").form('clear');
		$("#showimg").empty();
	};
	//修改密码
	function updataepsw() {
		$('#uppsw').form('submit', {
			url : 'changepsw',
			success : function(data) {
				var result = eval('(' + data + ')');
				if (result.msg2 == "1") {
					$("#uppsw").form('clear');
					$("#showimg").empty();//删除<span>元素集合中所有的子节点。
					$.messager.alert('我的消息', '修改成功,请重新登录！', 'info', function() {
						window.close();
						window.open("login.jsp", false);
					});
				} else if(result.msg2 == "0"){
					$.messager.alert("提示", "密码输入不一致,请重新输入！", "info");
					$("#uppsw").form('clear');
					$("#showimg").empty();
				}
				else{//密码输入为空
					$.messager.alert("提示", "密码输入不能为空,请重新输入！", "info");
					$("#showimg").empty();
				}
				
			}
		});
	}
</script>
<body>

	<div id="udepsw"
		style="width: 600px; height: 600px; margin-left: 30%; margin-top: 50px">

		<form id="uppsw" method="post">
			<div style="margin-bottom: 20px">
				原密码 :<input class="easyui-validatebox;" id="oldepsw" type="password"
					style="width: 250px; border-radius: 5px; margin-left: 33px;height: 35px"
					data-options=""><span id="showimg"></span>
			</div>
			<div style="margin-bottom: 5px" >
				新密码 :<input class="easyui-validatebox" id="npsw" name="npsw" maxlength="16"
					type="password"
					style="width: 250px; border-radius: 5px; margin-left: 33px;height: 35px"><span
					id="showlock2" style=""><img
					src='${pageContext.request.contextPath}/themes/icons/lock.png'></span>
			</div>
			
			
			<!--密码强度验证  -->
			 
			 <div id="tips" style="margin-left: 15%;width: 300px; display:none; " >
            <span ></span>
            <span></span>
           <span></span>
            <span></span>
            </div> <br>
              
			
			
			<div style="margin-top: 10px;">
				确认密码: <input class="easyui-validatebox" id="npsw2" name="npsw2" maxlength="16"
					type="password"
					style="width: 250px; border-radius: 5px; margin-left: 20px;height: 35px"><span
					id="showlock" style=""><img
					src='${pageContext.request.contextPath}/themes/icons/lock.png'></span>
			</div>
		</form>

		<div id="pswbt" style="margin-left: 21%;margin-top: 20px">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="updataepsw()" style="width: 80px" iconcls="icon-save">保存</a>

			<a href="javascript:void(0)" style="width: 80px"
				class="easyui-linkbutton" onclick="clearForm()"
				iconcls="icon-cancel">取消</a>
		</div>
	</div>

</body>
</html>